<template>
  <div class="import-detail">
    <h1 class="back-title" @click="$router.go(-1)"><i class="iconfont icon-fanhui"></i>详情列表</h1>
    <div class="detail">
      <p class="message">您可以 <span @click="$refs.dialogImport.init()">继续导入</span>，或 <span @click="move">查看导入商品</span>
      </p>
      <h2 v-html="$route.query.info"></h2>
      <el-table :data="list" border>
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column prop="causeFailure" label="失败原因"></el-table-column>
        <el-table-column prop="failureDetails" label="记录详情"></el-table-column>
      </el-table>
      <el-pagination align="right" background
                     class="pagination fixed"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="current"
                     :page-size="size"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
    <DialogImport ref="dialogImport"></DialogImport>
  </div>
</template>

<script>
    import DialogImport from '@/components/product/DialogImport'
    import {recordDetail} from '@/api/product/import'
    import {mapState} from 'vuex'

    export default {
        name: "importDetail",
        components: {DialogImport},
        data() {
            return {
                total: 0,
                current: 1,
                size: 10,
                list: []
            }
        },
        computed: {
            ...mapState(['common'])
        },
        mounted() {
            this.getList()
        },
        methods: {
            getList() {
                const params = {
                    productImportId: this.$route.params.id,
                    current: this.current,
                    size: this.size
                }
                recordDetail(params).then(res => {
                    if (res.data.success) {
                        const result = res.data.data;
                        this.list = result.records;
                        this.total = result.total;
                    }
                })
            },
            move() {
                this.$router.push(`/product/list/${this.common.currentProductID}`)
                this.bus.$emit('listenCheck');
            },
            handleCurrentChange(page) {
                this.current = page;
                this.getList();
            },
            handleSizeChange(val) {
                this.size = val;
                this.handleCurrentChange(1)
            },
        }
    }
</script>

<style scoped lang="scss">
  .import-detail {
    .detail {

      h2 {
        font-size: 14px;
        color: #3F3F3F;
        margin: 10px 0;
      }

      .message {
        color: #3F3F3F;
        font-size: 14px;
        line-height: 30px;
        cursor: pointer;

        span {
          color: #3399F6;
          border-bottom: 1px solid #3399F6;
        }
      }

      .el-table {
        border-radius: 10px;
      }
    }
  }

</style>
